<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="/webjars/jquery/3.6.0/dist/jquery.js"></script>
    <script src="/webjars/bootstrap/5.0.0/js/bootstrap.js"></script>
    <link href="/webjars/bootstrap/5.0.0/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <h2>测试栅格</h2>
        <div class="col-xs-6 col-sm-1 col-md-3 col-lg-9" style="background: red">测试1</div>
        <div class="col-xs-6  col-sm-11 col-md-9 col-lg-3" style="background: gray">测试2</div>
    </div>
    <div class="row">
        <h2>表格测试</h2>
        <table class="table table-striped table-bordered table-hover table-condensed">
            <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
            </thead>
            <tbody>
            <tr class="success">
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr class="info">
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr class="warning">
                <td>3</td>
                <td>John</td>
            </tr>
            <tr class="danger">
                <td>4</td>
                <td>John</td>
            </tr>
            <tr>
                <td>5</td>
                <td>John</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="row">
        <h2>form测试</h2>

        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="firstname" class="col-sm-2 control-label">名字</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="firstname"
                           placeholder="请输入名字">
                </div>
            </div>
            <div class="form-group">
                <label for="lastname" class="col-sm-2 control-label">姓</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="lastname"
                           placeholder="请输入姓">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> 请记住我
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
        <img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
        <img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">
    </div>
    <div class="row">
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="inputEmail3" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="inputPassword3" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label><input type="checkbox" />Remember me</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">Sign in</button>
                            </div>
                        </div>
                    </form>
                    <ul class="pagination">
                        <li>
                            <a href="#">Prev</a>
                        </li>
                        <li>
                            <a href="#">1</a>
                        </li>
                        <li>
                            <a href="#">2</a>
                        </li>
                        <li>
                            <a href="#">3</a>
                        </li>
                        <li>
                            <a href="#">4</a>
                        </li>
                        <li>
                            <a href="#">5</a>
                        </li>
                        <li>
                            <a href="#">Next</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .active{
        backgroud:red;
    }
</style>

</body>
</html>